<template>
  <div class="Home">
    <!-- 导航 -->
    <userTopMenu style="position: relative; z-index: 1000"></userTopMenu>

    <!-- 快速定位 -->
    <section class="top-area">
      <div class="header-area">
        <!-- Start Navigation -->
        <nav
          class="navbar navbar-default bootsnav navbar-sticky navbar-scrollspy"
          data-minus-value-desktop="70"
          data-minus-value-mobile="55"
          data-speed="1000"
        >
          <div class="container">
            <!-- Start Header Navigation -->
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle"
                data-toggle="collapse"
                data-target="#navbar-menu"
              >
                <i class="fa fa-bars"></i>
              </button>
              <a class="navbar-brand" href="#">快速<span>到达</span></a>
            </div>
            <!--/.navbar-header-->
            <!-- End Header Navigation -->

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div
              class="collapse navbar-collapse menu-ui-design"
              id="navbar-menu"
            >
              <ul
                class="nav navbar-nav navbar-right"
                data-in="fadeInDown"
                data-out="fadeOutUp"
                style="display: flex;"
              >
                <li class="scroll active"><a href="#explore">景点</a></li>
                <li class="scroll"><a href="#hotels">酒店</a></li>
                <li class="scroll"><a href="#packages">套餐</a></li>
                <li class="scroll"><a href="#footer">直达底部</a></li>
              </ul>
              <!--/.nav -->
            </div>
            <!-- /.navbar-collapse -->
          </div>
          <!--/.container-->
        </nav>
        <!--/nav-->
        <!-- End Navigation -->
      </div>
      <!--/.header-area-->
      <div class="clearfix"></div>
    </section>

    <!--顶部图片 -->
    <section id="home" class="welcome-hero">
      <div class="container">
        <div class="welcome-hero-txt">
          <h2>
            大P旅游服务平台<br />
            在这里你可以找到所有你想要的
          </h2>
          <p>
            最棒的景区、最好的酒店、最实惠的套餐等等所有你需要的
            轻击鼠标，美妙旅程就在此刻！
          </p>
        </div>
        <div class="welcome-hero-serch-box">
          <div class="welcome-hero-form" style="margin-left: 7%">
            <!-- <div class="single-welcome-hero-form"> -->
            <!-- 搜索框 -->
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="去哪:">
                <el-input
                  v-model="formInline.name"
                  placeholder="请输入目的地关键词，不填则展示推荐旅游点"
                ></el-input>
              </el-form-item>
              |
              <el-form-item label="城市:">
                <el-input
                  v-model="formInline.city"
                  placeholder="选填，格式为xxx市"
                ></el-input>
              </el-form-item>
              <el-form-item class="welcome-hero-serch">
                <el-button
                  type="primary"
                  @click="query()"
                  class="welcome-hero-btn"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
            <!-- </div> -->
          </div>
        </div>
      </div>
    </section>

    <!-- 优选 -->
    <!--服务展示，可定位到各自列表 -->
    <section id="list-topics" class="list-topics">
      <div class="container">
        <div class="list-topics-content">
          <ul>
            <!-- 酒店 -->
            <li>
              <div class="single-list-topics-content">
                <div class="single-list-topics-icon">
                  <i class="flaticon-building"></i>
                </div>
                <h2><a href="/hotel">酒店</a></h2>
                <p>3000+</p>
              </div>
            </li>
            <li>
              <div class="single-list-topics-content">
                <div class="single-list-topics-icon">
                  <i class="flaticon-travel"></i>
                </div>
                <h2><a href="/landmark">景区</a></h2>
                <p>5000+</p>
              </div>
            </li>
            <li>
              <div class="single-list-topics-content">
                <div class="single-list-topics-icon">
                  <i class="flaticon-transport"></i>
                </div>
                <h2><a href="/package">平台优选</a></h2>
                <p>500+</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!--/.container-->
    </section>

    <!--景区卡片列表，【或改用element-ui 卡片统一处理】 -- 提取为组件*3【景点、酒店、套餐】 -->
    <section id="explore" class="explore">
      <div class="container">
        <div class="section-header">
          <p style="font-size: 80px">探索</p>
          <p style="font-size: 20px">
            探索全新地点、品尝地方美食、感受地方文化，尽在此刻！
          </p>
        </div>
        <!--/.section-header-->
        <div class="explore-content">
          <!-- 卡片 -->
          <div class="row">
            <landmarkcards :cardlist="cardlist"></landmarkcards>
          </div>
        </div>
      </div>
      <!--/.container-->
    </section>
    <hr />

    <section id="hotels" class="explore">
      <div class="container">
        <div class="section-header">
          <p style="font-size: 80px">住宿</p>
          <p style="font-size: 20px">
            更舒适的房间、更完美的价格、更周到的服务，尽在此处！
          </p>
        </div>
        <!--/.section-header-->
        <div class="explore-content">
          <!-- 卡片 -->
          <div class="row">
            <hotelcards :cardlist="cardlist"></hotelcards>
          </div>
        </div>
      </div>
      <!--/.container-->
    </section>
    <hr />

    <section id="packages" class="explore">
      <div class="container">
        <div class="section-header">
          <p style="font-size: 80px">计划行</p>
          <p style="font-size: 20px">
            更舒适的体验、更完备的服务，全平台精选套餐，尽在此处！
          </p>
        </div>
        <!--/.section-header-->
        <div class="explore-content">
          <!-- 卡片 -->
          <div class="row">
            <packagecards></packagecards>
          </div>
        </div>
      </div>
      <!--/.container-->
    </section>
    <hr />

    <!-- 数据跳动 --不动 -->
    <section id="footer" class="statistics">
      <div class="container">
        <div class="statistics-counter">
          <div class="col-md-3 col-sm-6">
            <div class="single-ststistics-box">
              <div class="statistics-content">
                <div class="counter">90</div>
                <span>K+</span>
              </div>
              <!--/.statistics-content-->
              <h3>合作伙伴</h3>
            </div>
            <!--/.single-ststistics-box-->
          </div>
          <!--/.col-->
          <div class="col-md-3 col-sm-6">
            <div class="single-ststistics-box">
              <div class="statistics-content">
                <div class="counter">40</div>
                <span>k+</span>
              </div>
              <!--/.statistics-content-->
              <h3>服务次</h3>
            </div>
            <!--/.single-ststistics-box-->
          </div>
          <!--/.col-->
          <div class="col-md-3 col-sm-6">
            <div class="single-ststistics-box">
              <div class="statistics-content">
                <div class="counter">65</div>
                <span>k+</span>
              </div>
              <!--/.statistics-content-->
              <h3>访问次</h3>
            </div>
            <!--/.single-ststistics-box-->
          </div>
          <!--/.col-->
          <div class="col-md-3 col-sm-6">
            <div class="single-ststistics-box">
              <div class="statistics-content">
                <div class="counter">50</div>
                <span>k+</span>
              </div>
              <!--/.statistics-content-->
              <h3>好评</h3>
            </div>
            <!--/.single-ststistics-box-->
          </div>
          <!--/.col-->
        </div>
        <!--/.statistics-counter-->
      </div>
      <!--/.container-->
    </section>
  </div>
</template>

<script>
import userTopMenu from "../../components/menu/userTopMenu.vue";
import landmarkcards from "../../components/cards/landmarkCards.vue";
import hotelcards from "../../components/cards/hotelCards.vue";
import packagecards from "../../components/cards/packageCards.vue";

export default {
  name: "home",
  components: {
    userTopMenu,
    landmarkcards,
    hotelcards,
    packagecards,
  },
  data() {
    return {
      //搜索条件
      formInline: { name: "", city: "" },
      //cardlist
      cardlist: {
        name: "",
        city: "",
        page: 1,
        size: 6,
        cardstyle: { width: "90%", height: "570px", marginBottom: "20px" },
      },
    };
  },
  methods: {
    //搜索框跳转 -- 点击的时候带值跳转到result页面
    query() {
      // console.log("query:");
      // console.log(this.formInline);
      this.$router.push({
        name: "result",
        params: { formInline: this.formInline },
      });
    },
  },
  mounted() {},
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i");
@import url("../../assets//css/home/css/font-awesome.min.css");
@import url("../../assets//css/home/css/linearicons.css");
@import url("../../assets//css/home/css/animate.css");
@import url("../../assets//css/home/css/flaticon.css");
@import url("../../assets//css/home/css/slick.css");
@import url("../../assets//css/home/css/slick-theme.css");
@import url("../../assets//css/home/css/bootstrap.min.css");
@import url("../../assets//css/home/css/bootsnav.css");
@import url("../../assets//css/home/css/style.css");
@import url("../../assets//css/home/css/responsive.css");

/* home */
* {
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.Home {
  font-family: "maobi";
  font-size: 20px;
  color: #a09e9c;
  text-transform: initial;
  max-width: 1920px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* 快速定位 */
.header-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 45px;
}

/* 平台优选 */
.list-topics-content ul {
  display: flex;
  justify-content: space-around;
}
</style>
